<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>动画案例_Vue实现</title>
	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		.picture {
			width: 100px;
		}

		.qiuku-enter-active {
			animation: atguigu 1s;
		}

		.qiuku-leave-active {
			animation: atguigu 1s reverse;
		}

		/* 创建一个进入的动画 */
		@keyframes atguigu {
			0% {
				transform: scale(0);
			}

			50% {
				transform: scale(1.3);
			}

			100% {
				transform: scale(1);
			}
		}
	</style>
</head>

<body>
	<!--
				1. 基本编码
							(1).在目标元素外包裹<transition name="xxx">
							(2).编写：进入动画、离开动画 的样式
				3. 类名规范:
							进入动画样式：xxxx-enter-active
							离开动画样式：xxxx-leave-active
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<button @click="isShow = !isShow">切换</button> <br />
		<transition name="qiuku">
			<img v-show="isShow" class="picture" src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt="">
		</transition>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				isShow: true
			}
		})
	</script>

</body>

</html>